<template>
	<div>
		<seller-tap>
			<span slot='font'>确认订单</span>
			<a :href="target" class="fa fa-chevron-left" slot='a'></a>
		</seller-tap>
		<main>
			<div class="area" v-if="user.area.length>0">
				<div class="left">
					<i class="fa fa-map-marker"></i>
				</div>
				<!--href="#/buller/changeArea"-->
				<a v-for="(item,ins) in user.area" v-if='item.index'  class="right">

					<h4>收货人：{{item.name}} <span>{{item.phone}}</span></h4>
					<p>收货地址：{{item.area}}</p>
					<p>（收货不便时，可选择免费代收货服务）</p>
				</a>
			</div>
			<div class="noArea" v-else>
				你还没有<a v-if="color" :href="'#/buller/area/?num='+num+'&model='+model+'&color='+color+'&id='+good._id">收货地址</a>
				<a v-if="!color" href="#/buller/area/?car=das">收货地址</a>
				呢，快去设置吧
				<p class="show"  style="display: none;text-align: center;color: white;line-height:50px;position: absolute;width:80%;bottom: 55px;background: rgba(0,0,0,.4);">先去添加收货地址吧~</p>
			</div>
			<div v-if="good.name" class="now">

				<div class="good">
					<img :src="'http://localhost:2200'+good.avatar[0]" />
					<div class="right">
						<p>{{good.name}}</p>
						<p>{{good.describe}}</p>
						<p>颜色分类:{{color}}，型号:{{model}}</p>
						<p><span>{{good.send | sendC}}</span></p>
						<p><small>¥</small>{{good.price}} <span>x{{num}}</span></p>
	
					</div>
				</div>
				<div class="clear">

				</div>

			</div>
			<div v-if="buller" class="car">
				<ul>
					<li v-for="(item,ins) in buller.shopCar" :key='ins'  v-if="item.checkReady" class="good">
						<img :src="'http://localhost:2200'+item.avatar[0]" />
						<div class="right">
							<p>{{item.name}}</p>
							<p>{{item.describe}}</p>
							<p>颜色分类:{{item.color[0]}}，型号:{{item.model[0]}}</p>
							<p><span>{{item.send | sendC}}</span></p>
							<p><small>¥</small>{{item.price}} <span>x{{item.num}}</span></p>

						</div>
					</li>
				</ul>
			</div>
		</main>
		<footer>
			<div>
				<span>合计：<small>¥</small><b>{{money}}</b></span>
				<a v-if="money<=0">
					提交订单
				</a>
				<a v-if="money>0" @click="tiao($event,money)">
					提交订单
				</a>
			</div>
		</footer>

	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import SellerTap from '../components/SellerTap'
	export default {
		data: function() {
			return {
				buller: null,
				money: 0,
				checkNum: 0,
				num: 0,
				color: '',
				model: '',
				target: '',
				good: {},
				user: {},
			
			}
		},
		components: {
			SellerTap,
		},
		filters: {
			sendC(value) {

				if(value == true) {
					return '包邮'
				} else {
					return ''
				}

			}
		},
		methods:{
			tiao(ev,money){
				if(this.user.area.length<=0){
					$('.show').fadeIn();
					setTimeout(function(){
					$('.show').fadeOut();
						
					},700)
				}else{
					
					location.href='#/buller/useMoney?money='+money
					
				}
			}
		},
		mounted() {
			
			
		
			

			axios.get('/buller/checkLogin').then((result) => {

				this.user = result.data.data;

			}).catch((err) => {
				console.log(err);
			})

			var good_id = this.$route.query.id;

			if(good_id) {
				this.target = '#/good/info/' + good_id
			} else {
				this.target = '#/buller/car'
			}
			
			
			

			if(good_id) {
				this.color = this.$route.query.color;
				this.model = this.$route.query.model;
				this.num = this.$route.query.num;

				axios.get('/buller/goodInfo/' + good_id).then((result) => {
					this.good = result.data.good;
					this.money = this.num * this.good.price;
				}).catch((err) => {
					console.log(err);
				})

			} else {
				axios.get('/buller/checkLogin').then((result) => {

					this.buller = result.data.data;

					this.checkNum = 0;
					this.money = 0;
					for(var i = 0; i < this.buller.shopCar.length; i++) {

						if(this.buller.shopCar[i].checkReady == true) {
							this.money += this.buller.shopCar[i].num * this.buller.shopCar[i].price;
							this.checkNum += 1;
						}

					}

				}).catch((err) => {
					console.log(err);
				})

			}

		},

	}
</script>

<style scoped>
	main {
		padding-bottom: 47px;
	}
	
	.clear {
		clear: both;
	}
	
	.area {
		overflow: hidden;
		padding: 10px 0;
		border-bottom: dashed 2px #EEEEEE;
	}
	
	.area .left {
		float: left;
		width: 10%;
		text-align: center;
		line-height: 80px;
		font-size: 30px;
		color: #888888;
	}
	
	.area .right {
		float: right;
		width: 90%;
	}
	
	.area .right h4 {
		line-height: 20px;
		font-weight: 500;
		overflow: hidden;
	}
	
	.area .right h4 span {
		float: right;
		padding-right: 15px;
	}
	
	.area .right p {
		line-height: 16px;
		margin-top: 10px;
		color: #444;
		font-size: 12px;
	}
	
	.area .right p:last-child {
		color: orange;
		margin-top: 7px;
	}
	
	.good {
		background: #EEEEEE;
		overflow: hidden;
		padding: 5px;
		padding-left: 10px;
		margin-top: 5px;
	}
	
	.good img {
		float: left;
		width: 100px;
		height: 100px;
	}
	
	.good>div {
		float: right;
		width: 66%;
	}
	
	.good>div p:first-child {
		font-size: 15px;
	}
	
	.good>div p:nth-child(2) {
		font-size: 12px;
		color: #FA8072;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.good>div p:nth-child(3) {
		font-size: 12px;
		color: #777;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-top: 0;
	}
	
	.good>div p:nth-child(4) span {
		font-size: 10px;
		border: solid 1px orangered;
		color: orangered;
		border-radius: 10%;
		padding: 0 3px;
	}
	
	.good>div p:nth-child(5) {
		overflow: hidden;
		font-size: 14px;
		color: orangered;
	}
	
	.good>div p:nth-child(5) span {
		float: right;
		margin-right: 5%;
		font-size: 13px;
		color: #333;
	}
	.noArea{
		padding: 50px;
	}
	.noArea a{
		color: orangered;
		margin: 0 2px;
	}
	footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		border-top: solid 1px #EEEEEE;
		background: #FBF9FE;
		overflow: hidden;
	}
	
	footer>div {
		float: right;
		font-size: 15px;
		line-height: 45px;
	}
	
	footer b {
		font-weight: normal;
		font-size: 16px;
		margin-right: 10px;
	}
	
	footer span small,
	footer span b {
		color: orangered;
	}
	
	footer a {
		text-align: center;
		padding: 0px 10px;
		color: white;
		float: right;
		line-height: 46px;
		background: linear-gradient(to right, #ff7700 15%, #ff5500 80%);
	}
</style>